<template>
  <div class="wt-sm-container">
    <a-menu
      mode="inline"
      @click="handleMenuClick"
      :defaultOpenKeys="openKeys"
      :defaultSelectedKeys="selectedKeys"
      :selectedKeys="selectedKeys"
      :openKeys.sync="openKeys"
      :inline-collapsed="collapse"
    >
      <template v-for="item in fullMenus">
        <!-- 一级无子菜单  tip:通过name跳转避免出现路由覆盖问题 -->
        <a-menu-item
          v-if="!item.children || item.children.length === 0"
          :key="item.spyCode"
          class="menu-item"
          :class="{ 'menu-item-collapse': collapse }"
          @click="() => $router.push({ name: item.name })"
        >
          <svg-icon :icon-class="item.icon" :scale="1"></svg-icon>
          <span>{{ item.title }}</span>
        </a-menu-item>
        <!-- 一级有子菜单 -->
        <sub-menu
          :collapse="collapse"
          v-else
          :key="`${item.spyCode}-${item.name}`"
          :menu-info="item"
        />
      </template>
    </a-menu>
  </div>
</template>
<script>
import SubMenu from "./SubMenu.vue";
import { mapState } from "vuex";
export default {
  name: "sideMenu",
  components: {
    SubMenu,
  },
  props: {
    theme: {
      type: String,
      default: "dark",
    },
  },
  data() {
    return {
      selectedKeys: [],
      openKeys: [],
      openKeysMap: {}, //单id跟父级菜单的映射表
    };
  },
  watch: {
    $route: function (val) {
      this.selectedKeys = [val.meta.spyCode || val.meta.parentSpyCode];
    },
  },
  computed: {
    ...mapState("common", ["collapse"]),
    ...mapState("addRoutes", ["fullMenus"]),
  },
  created() {
    this.mapOpenKeys(this.fullMenus); //生成菜单id跟父级菜单的映射表
    //设置初始选中项 拿到菜单的id(同路由id)作为selectedKeys
    if (this.$route.meta.isHideRoute) {
      this.selectedKeys = [this.$route.meta.parentSpyCode];
    } else {
      this.selectedKeys = [this.$route.meta.spyCode];
    }
    //设置初始展开项
    this.openKeys = this.openKeysMap[this.selectedKeys]?.length
      ? [this.openKeysMap[this.selectedKeys]]
      : this.selectedKeys;
  },
  methods: {
    /**
     * @desc: 点击菜单跳转
     * @param {Object} params  菜单click回调事件自带参数
     * @author: went
     */
    handleMenuClick(params) {
      this.selectedKeys = params.keyPath;
      this.openKeys = params.keyPath;
    },
    /**
     * @desc: 创建菜单id跟父级菜单的映射表
     * @param {String} menus  菜单树
     * @param {Object} parentMenu  父级菜单key
     * @author: went
     */
    mapOpenKeys(menus, parentKey = {}) {
      menus.forEach((item) => {
        this.openKeysMap[item.spyCode] = parentKey;
        if (item.children?.length) {
          this.mapOpenKeys(item.children, item.spyCode);
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.campus-salary-web {
  cursor: pointer;
}
.wt-sm-container {
  background-color: #fff;
  width: 100%;
  padding: 0 15px;
  overflow-x: hidden;
}
/deep/.ant-menu {
  border-right: none;
  background-color: #fff;
  .ant-menu-submenu-title {
    padding: 17px 16px;
    display: flex;
    align-items: center;
    position: relative;
  }
  .ant-menu-item,
  .ant-menu-submenu-title {
    height: 54px;
    line-height: 54px;
    list-style-position: inside;
    list-style-type: disc;
    padding-left: 16px !important;
    font-size: 16px;
    color: #303233;
  }
  .ant-menu-title-content {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .ant-menu-submenu-selected {
    background: rgba(66, 132, 242, 0.1);
    .ant-menu-submenu-title {
      .ant-menu-title-content,
      .ant-menu-submenu-arrow {
        color: #3e77fa;
      }
    }
  }

  .svg-icon {
    margin-right: 16px;
    font-size: 30px;
    color: #a5aeb8;
  }

  .ant-menu-item-selected {
    background: #fff;
    &::after {
      display: none;
    }
    .ant-menu-title-content {
      color: #3e77fa;
    }
    .svg-icon {
      color: #3e77fa;
    }
  }
  .ant-menu-item:active,
  .ant-menu-submenu-title:active {
    background: #a4a4a4;
  }
}

// // .ant-layout-sider-collapsed {

// //   .svg-icon {
// //     margin-right: 100px;
// //     color: #a5aeb8;
// // }
// //   }
// /deep/.ant-menu-inline-collapsed {
//   width: 100px;
//   .ant-menu-submenu-title {
//     padding-left: 0px;
//   }
//   .svg-icon {
//     margin-right: 100px;
//     color: #a5aeb8;
//   }
// }
// /deep/ .ant-menu-submenu-arrow {
//   color: #a4a4a4;
// }
// /deep/.ant-menu-sub {
//   background-color: #fff;
//   .ant-menu-item-selected::before {
//     content: "";
//     display: inline-block;
//     width: 6px;
//     height: 6px;
//     vertical-align: middle;
//     border-radius: 50%;
//     background-color: #ffffff;
//     margin-left: -6px;
//     margin-bottom: 2px;
//   }
// }
// /deep/.ant-menu-sub.ant-menu-inline > .ant-menu-item,
// .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
//   height: 48px;
//   line-height: 48px;
//   list-style-position: inside;
//   list-style-type: disc;
// }

// /deep/.ant-menu-inline .ant-menu-selected::after,
// .ant-menu-inline .ant-menu-item-selected::after {
//   transform: scaleY(1);
//   opacity: 0;
//   transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
//     opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
// }
</style>
